<template>
  <div class="m-content-box add-role">
    <div class="btn-top-group">
      <el-button type="primary" style="margin-right: 20px" @click="set_default" v-if="ruleForm.can_del == 0">恢复默认设置</el-button>
      <router-link :to="'/liansuo/userauth'">
        <el-button type="primary">返回</el-button>
      </router-link>
    </div>
    <div id="dataForm" class="normal-content role-detail-box">
      <div class="step-box js-step-1">
        <div class="flex-edit-box">
          <div class="base-title">角色详情</div>
          <div class="field-box clear" style="display: flex;justify-content: space-between">
            <label class="fl label first_name"><span style="color:red;">*</span> 角色名称</label>
            <div>
              <el-input v-model="ruleForm.title" placeholder="请输入角色名称" />
            </div>
          </div>
          <div class="field-box clear" style="display: flex;justify-content: space-between">
            <label class="fl label">角色属性</label>
            <div>
              <!--              角色属性(1教练2店长3前台4会籍顾问5分销员6其他)-->
              <el-radio-group v-model="ruleForm.attrs">
                <el-radio :label="1">教练</el-radio>
                <el-radio :label="2">店长</el-radio>
                <el-radio :label="3">前台</el-radio>
                <el-radio :label="4">会籍顾问</el-radio>
                <el-radio :label="5">分销员</el-radio>
                <el-radio :label="6">其他</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="field-box clear" style="display: flex">
            <label class="fl label">备注</label>
            <div>
              <el-input
                v-model="ruleForm.brief"
                style="min-height: 33px;width: 720px;margin: 20px;"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
              />
            </div>
          </div>
          <div class="flex-edit-box mt-30">
            <div class="base-title">角色权限</div>
            <!-- 权限列表 -->
            <!--            <div class="field-box">-->
            <!--              <span style="color:red;">*</span>-->
            <!--              全部选择-->
            <!--            </div>-->
            <div class="m-checkbox-boxs field-box" style="padding: 20px 0px">
              <el-tree
                ref="tree"
                style="background: #f2f2f2"
                :data="data"
                show-checkbox
                node-key="id"
                :default-expand-all="true"
                :props="defaultProps"
                @check-change="handleCheckChange"
              />

            </div>
            <!-- /权限列表 -->
          </div>


          <div class="flex-edit-box mt-30">
            <div class="base-title">手机管理端角色权限</div>
            <!-- 权限列表 -->
            <div class="m-checkbox-boxs field-box" style="padding: 20px 0px">
              <el-tree
                ref="tree2"
                style="background: #f2f2f2"
                :data="admin_data"
                show-checkbox
                node-key="id"
                :default-expand-all="true"
                :props="defaultProps"
                @check-change="handleCheckChange"
              />
            </div>
            <!-- /权限列表 -->
          </div>
          <div class="field-box">
            <div class="item">
              说明：查看品牌信息、场馆信息、查看员工，课表信息、查看教室为基础权限，不可编辑
            </div>
          </div>
          <div style="display: flex;width: 200px;margin: 0px auto;margin-top: 30px;margin-bottom: 30px">
            <el-button type="success" @click="savedata">保存</el-button>
            <el-button type="info" style="margin-left: 20px">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex' // Secondary package based on el-pagination
import { AuthList, RoleList, AddEdit, AuthDefault, Del, AdminRoleList } from '@/api/brand'
import { details } from '@/api/group'
export default {
  name: 'ArticleList',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        title: '',
        // 角色属性
        attrs: 1,
        brief: '',
        rulelist: '',
        can_del: 1,
        can_update: 1
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      list: null,
      total: 0,
      listLoading: true,
      listLoading2: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      status: {},
      role: {},
      roleIndex: '',
      statusIndex: 0,
      data: [],
      admin_data:[]
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var query = this.$route.query
    if (query.id) {
      this.ruleForm.id = query.id
      this.getdetails()
    }
    var xuanList = [{
      name: '角色详情',
      url: '/system/roleDetail',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    // 获取权限节点信息
    this.getdata()
    this.getadmindata()
    // 设置节点信息
  },
  methods: {
    // 恢复默认设置
    set_default() {
      var params = {
        id: this.ruleForm.id
      }
      this.$confirm('确认充值该权限吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        AuthDefault(params).then(response => {
          const {
            data
          } = response
          this.$message({
            type: 'success',
            message: '重置成功!'
          })
          this.getdetails()
          this.listLoading = false
        }).catch(error => {
          console.log(error)
          this.listLoading = false
        })
      }).catch(() => {});
    },
    getdetails() {
      this.listLoading = true
      var params = {
        id: this.ruleForm.id
      }
      details(params).then(response => {
        const {
          data
        } = response
        console.log(data)
        Object.keys(this.ruleForm).forEach((key) => {
          if (data[key] !== undefined) this.ruleForm[key] = data[key]
        })
        this.$refs.tree.setCheckedKeys(data.rulelist.split(','))
        this.$refs.tree2.setCheckedKeys(data.adminrulelist.split(','))
        this.listLoading = false
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    },
    getCurrentNode(nodeObj, nodeState) {
      // 获取选中的节点数据
      console.log(nodeObj)
    },
    savedata() {
      var choice_data = this.$refs.tree.getCheckedNodes()
      var node_arr = []
      for (var i = 0; i < choice_data.length; i++) {
        node_arr.push(choice_data[i].id)
      }
      var data = this.ruleForm
      data.rulelist = node_arr.join(',')
      var choice_data2 = this.$refs.tree2.getCheckedNodes()
      var node_arr2 = []
      for (var i = 0; i < choice_data2.length; i++) {
        node_arr2.push(choice_data2[i].id)
      }
      var data = this.ruleForm
      data.adminrulelist = node_arr2.join(',')
      AddEdit(data).then(response => {
        const {
          data
        } = response
        this.listLoading = false
        this.$router.go(-1)
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
      console.log(node_arr)
    },
    getdata() {
      this.listLoading = true
      const params = {}
      RoleList(params).then(response => {
        const {
          data
        } = response
        console.log(data);
        this.data = data
        this.listLoading = false
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    },
    getadmindata() {
      this.listLoading2 = true
      const params = {}
      AdminRoleList(params).then(response => {
        const {
          data
        } = response
        console.log(data);
        this.admin_data = data
        this.listLoading2 = false
      }).catch(error => {
        console.log(error)
        this.listLoading2 = false
      })
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked)
    }
  }
}

</script>

<style scoped>
.m-content-box {
  position: relative;
  padding: 30px 63px;
  font-size: 14px
}
.add-role .btn-top-group {
  position: absolute;
  right: 63px;
  top: 8px;
  height: 34px;
}
.normal-content {
  position: relative;
  width: 840px;
  margin: 0 auto;
}
.flex-edit-box {
  position: relative;
}
.flex-edit-box .base-title {
  height: 22px;
  font-size: 12px;
  color: #787878;
}
.role-detail-box .field-box {
  background: #f2f2f2;
  line-height: 44px;
}
.role-detail-box .field-box {
  margin-bottom: 2px;
  padding: 0 20px;
}
.flex-edit-box .field-box {
  margin-bottom: 8px;
  background: #f2f2f2;
  min-height: 42px;
  //line-height: 32px;
}
.clear {
  zoom: 1;
}
.flex-edit-box {
  position: relative;
}

.mt-30 {
  margin-top: 30px;
}
.role-detail-box .first_name {
  margin: 0 -12px !important;
}

.fl {
  float: left;
}
.fr {
  float: right;
}
/deep/ .el-tree-node__label{
  font-size: 16px !important;

}
/deep/ .el-tree-node__content{
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 30px;
  cursor: pointer;
  margin-bottom: 10px;
}
/deep/ .el-checkbox__inner{
  display: inline-block;
  position: relative;
  border: 1px solid #DCDFE6;
  border-radius: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background-color: #FFFFFF;
  z-index: 1;
  -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after{
  -webkit-transform: rotate(45deg) scaleY(1);
  transform: rotate(45deg) scaleY(1);
  margin-left: 3px;
  margin-top: 3px;
}

</style>
